<!DOCTYPE html>


<html lang="zn-CH">


<head>
  <meta charset="utf-8" />
    
  <meta name="description" content="What I can do is to Do My Personal Best!" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    CSS编码规范 |  小熊的博客
  </title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  
  <link rel="shortcut icon" href="http://www.cdn.adingxiong.com/b5363a06dc744d79a94021492bcefe27" />
  
  
<link rel="stylesheet" href="/blog/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/blog/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

<link rel="alternate" href="/blog/atom.xml" title="小熊的博客" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    <main class="content on">
      <section class="outer">
  <article id="post-css-standard" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  CSS编码规范
</h1>
 

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2020/04/18/css-standard/" class="article-date">
  <time datetime="2020-04-18T05:47:36.265Z" itemprop="datePublished">2020-04-18</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/blog/categories/%E5%89%8D%E7%AB%AF/">前端</a>
  </div>

      
      
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> Word count:</span>
            <span class="post-count">4k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> Reading time≈</span>
            <span class="post-count">17 min</span>
        </span>
    </span>
</div>

      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    
    <div class="article-entry" itemprop="articleBody">
      
      

      
      <h1 id="CSS编码规范"><a href="#CSS编码规范" class="headerlink" title="CSS编码规范"></a>CSS编码规范</h1><p><a href="#1-%E5%89%8D%E8%A8%80">1 前言</a></p>
<p><a href="#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC">2 代码风格</a></p>
<p>　　<a href="#21-%E6%96%87%E4%BB%B6">2.1 文件</a></p>
<p>　　<a href="#22-%E7%BC%A9%E8%BF%9B">2.2 缩进</a></p>
<p>　　<a href="#23-%E7%A9%BA%E6%A0%BC">2.3 空格</a></p>
<p>　　<a href="#24-%E8%A1%8C%E9%95%BF%E5%BA%A6">2.4 行长度</a></p>
<p>　　<a href="#25-%E9%80%89%E6%8B%A9%E5%99%A8">2.5 选择器</a></p>
<p>　　<a href="#26-%E5%B1%9E%E6%80%A7">2.6 属性</a></p>
<p><a href="#3-%E9%80%9A%E7%94%A8">3 通用</a></p>
<p>　　<a href="#31-%E9%80%89%E6%8B%A9%E5%99%A8">3.1 选择器</a></p>
<p>　　<a href="#32-%E5%B1%9E%E6%80%A7%E7%BC%A9%E5%86%99">3.2 属性缩写</a></p>
<p>　　<a href="#33-%E5%B1%9E%E6%80%A7%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F">3.3 属性书写顺序</a></p>
<p>　　<a href="#34-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8">3.4 清除浮动</a></p>
<p>　　<a href="#35-important">3.5 !important</a></p>
<p>　　<a href="#36-z-index">3.6 z-index</a></p>
<p><a href="#4-%E5%80%BC%E4%B8%8E%E5%8D%95%E4%BD%8D">4 值与单位</a></p>
<p>　　<a href="#41-%E6%96%87%E6%9C%AC">4.1 文本</a></p>
<p>　　<a href="#42-%E6%95%B0%E5%80%BC">4.2 数值</a></p>
<p>　　<a href="#43-url">4.3 url()</a></p>
<p>　　<a href="#44-%E9%95%BF%E5%BA%A6">4.4 长度</a></p>
<p>　　<a href="#45-%E9%A2%9C%E8%89%B2">4.5 颜色</a></p>
<p>　　<a href="#46-2d-%E4%BD%8D%E7%BD%AE">4.6 2D 位置</a></p>
<p><a href="#5-%E6%96%87%E6%9C%AC%E7%BC%96%E6%8E%92">5 文本编排</a></p>
<p>　　<a href="#51-%E5%AD%97%E4%BD%93%E6%97%8F">5.1 字体族</a></p>
<p>　　<a href="#52-%E5%AD%97%E5%8F%B7">5.2 字号</a></p>
<p>　　<a href="#53-%E5%AD%97%E4%BD%93%E9%A3%8E%E6%A0%BC">5.3 字体风格</a></p>
<p>　　<a href="#54-%E5%AD%97%E9%87%8D">5.4 字重</a></p>
<p>　　<a href="#55-%E8%A1%8C%E9%AB%98">5.5 行高</a></p>
<p><a href="#6-%E5%8F%98%E6%8D%A2%E4%B8%8E%E5%8A%A8%E7%94%BB">6 变换与动画</a></p>
<p><a href="#7-%E5%93%8D%E5%BA%94%E5%BC%8F">7 响应式</a></p>
<p><a href="#8-%E5%85%BC%E5%AE%B9%E6%80%A7">8 兼容性</a></p>
<p>　　<a href="#81-%E5%B1%9E%E6%80%A7%E5%89%8D%E7%BC%80">8.1 属性前缀</a></p>
<p>　　<a href="#82-hack">8.2 Hack</a></p>
<p>　　<a href="#83-expression">8.3 Expression</a></p>
<h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1 前言"></a>1 前言</h2><p>CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。</p>
<p>虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。</p>
<h2 id="2-代码风格"><a href="#2-代码风格" class="headerlink" title="2 代码风格"></a>2 代码风格</h2><h3 id="2-1-文件"><a href="#2-1-文件" class="headerlink" title="2.1 文件"></a>2.1 文件</h3><h4 id="建议-CSS-文件使用无-BOM-的-UTF-8-编码。"><a href="#建议-CSS-文件使用无-BOM-的-UTF-8-编码。" class="headerlink" title="[建议] CSS 文件使用无 BOM 的 UTF-8 编码。"></a>[建议] <code>CSS</code> 文件使用无 <code>BOM</code> 的 <code>UTF-8</code> 编码。</h4><p>解释：</p>
<p>UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。</p>
<h3 id="2-2-缩进"><a href="#2-2-缩进" class="headerlink" title="2.2 缩进"></a>2.2 缩进</h3><h4 id="强制-使用-4-个空格做为一个缩进层级，不允许使用-2-个空格-或-tab-字符。"><a href="#强制-使用-4-个空格做为一个缩进层级，不允许使用-2-个空格-或-tab-字符。" class="headerlink" title="[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。"></a>[强制] 使用 <code>4</code> 个空格做为一个缩进层级，不允许使用 <code>2</code> 个空格 或 <code>tab</code> 字符。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.selector</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-3-空格"><a href="#2-3-空格" class="headerlink" title="2.3 空格"></a>2.3 空格</h3><h4 id="强制-选择器-与-之间必须包含空格。"><a href="#强制-选择器-与-之间必须包含空格。" class="headerlink" title="[强制] 选择器 与 { 之间必须包含空格。"></a>[强制] <code>选择器</code> 与 <code>{</code> 之间必须包含空格。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.selector</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-属性名-与之后的-之间不允许包含空格，-与-属性值-之间必须包含空格。"><a href="#强制-属性名-与之后的-之间不允许包含空格，-与-属性值-之间必须包含空格。" class="headerlink" title="[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。"></a>[强制] <code>属性名</code> 与之后的 <code>:</code> 之间不允许包含空格， <code>:</code> 与 <code>属性值</code> 之间必须包含空格。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">margin</span>: 0;</span><br></pre></td></tr></table></figure>

<h4 id="强制-列表型属性值-书写在单行时，-后必须跟一个空格。"><a href="#强制-列表型属性值-书写在单行时，-后必须跟一个空格。" class="headerlink" title="[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。"></a>[强制] <code>列表型属性值</code> 书写在单行时，<code>,</code> 后必须跟一个空格。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Arial</span>, <span class="selector-tag">sans-serif</span>;</span><br></pre></td></tr></table></figure>

<h3 id="2-4-行长度"><a href="#2-4-行长度" class="headerlink" title="2.4 行长度"></a>2.4 行长度</h3><h4 id="强制-每行不得超过-120-个字符，除非单行不可分割。"><a href="#强制-每行不得超过-120-个字符，除非单行不可分割。" class="headerlink" title="[强制] 每行不得超过 120 个字符，除非单行不可分割。"></a>[强制] 每行不得超过 <code>120</code> 个字符，除非单行不可分割。</h4><p>解释：</p>
<p>常见不可分割的场景为URL超长。</p>
<h4 id="建议-对于超长的样式，在样式值的-空格-处或-后换行，建议按逻辑分组。"><a href="#建议-对于超长的样式，在样式值的-空格-处或-后换行，建议按逻辑分组。" class="headerlink" title="[建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。"></a>[建议] 对于超长的样式，在样式值的 <code>空格</code> 处或 <code>,</code> 后换行，建议按逻辑分组。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 不同属性值按逻辑分组 */</span></span><br><span class="line"><span class="selector-tag">background</span>:</span><br><span class="line">    <span class="selector-tag">transparent</span> <span class="selector-tag">url</span>(<span class="selector-tag">aVeryVeryVeryLongUrlIsPlacedHere</span>)</span><br><span class="line">    <span class="selector-tag">no-repeat</span> 0 0;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 可重复多次的属性，每次重复一行 */</span></span><br><span class="line"><span class="selector-tag">background-image</span>:</span><br><span class="line">    <span class="selector-tag">url</span>(<span class="selector-tag">aVeryVeryVeryLongUrlIsPlacedHere</span>)</span><br><span class="line">    <span class="selector-tag">url</span>(<span class="selector-tag">anotherVeryVeryVeryLongUrlIsPlacedHere</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 类似函数的属性值可以根据函数调用的缩进进行 */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">-webkit-gradient</span>(</span><br><span class="line">    <span class="selector-tag">linear</span>,</span><br><span class="line">    <span class="selector-tag">left</span> <span class="selector-tag">bottom</span>,</span><br><span class="line">    <span class="selector-tag">left</span> <span class="selector-tag">top</span>,</span><br><span class="line">    <span class="selector-tag">color-stop</span>(0<span class="selector-class">.04</span>, <span class="selector-tag">rgb</span>(88,94,124)),</span><br><span class="line">    <span class="selector-tag">color-stop</span>(0<span class="selector-class">.52</span>, <span class="selector-tag">rgb</span>(115,123,162))</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h3 id="2-5-选择器"><a href="#2-5-选择器" class="headerlink" title="2.5 选择器"></a>2.5 选择器</h3><h4 id="强制-当一个-rule-包含多个-selector-时，每个选择器声明必须独占一行。"><a href="#强制-当一个-rule-包含多个-selector-时，每个选择器声明必须独占一行。" class="headerlink" title="[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。"></a>[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.post</span>,</span><br><span class="line"><span class="selector-class">.page</span>,</span><br><span class="line"><span class="selector-class">.comment</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.post</span>, <span class="selector-class">.page</span>, <span class="selector-class">.comment</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-gt-、-、-选择器的两边各保留一个空格。"><a href="#强制-gt-、-、-选择器的两边各保留一个空格。" class="headerlink" title="[强制] &gt;、+、~ 选择器的两边各保留一个空格。"></a>[强制] <code>&gt;</code>、<code>+</code>、<code>~</code> 选择器的两边各保留一个空格。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">main</span> &gt; <span class="selector-tag">nav</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">label</span> + <span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:checked</span> ~ <span class="selector-tag">button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#69C</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">nav</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">label</span>+<span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:checked</span>~<span class="selector-tag">button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#69C</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-属性选择器中的值必须用双引号包围。"><a href="#强制-属性选择器中的值必须用双引号包围。" class="headerlink" title="[强制] 属性选择器中的值必须用双引号包围。"></a>[强制] 属性选择器中的值必须用双引号包围。</h4><p>解释：</p>
<p>不允许使用单引号，不允许不使用引号。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">article</span><span class="selector-attr">[character=<span class="string">"juliet"</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">voice-family</span>: <span class="string">"Vivien Leigh"</span>, victoria, female</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">article</span><span class="selector-attr">[character=<span class="string">'juliet'</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">voice-family</span>: <span class="string">"Vivien Leigh"</span>, victoria, female</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-6-属性"><a href="#2-6-属性" class="headerlink" title="2.6 属性"></a>2.6 属性</h3><h4 id="强制-属性定义必须另起一行。"><a href="#强制-属性定义必须另起一行。" class="headerlink" title="[强制] 属性定义必须另起一行。"></a>[强制] 属性定义必须另起一行。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.selector</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.selector</span> &#123; <span class="attribute">margin</span>: <span class="number">0</span>; <span class="attribute">padding</span>: <span class="number">0</span>; &#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-属性定义后必须以分号结尾。"><a href="#强制-属性定义后必须以分号结尾。" class="headerlink" title="[强制] 属性定义后必须以分号结尾。"></a>[强制] 属性定义后必须以分号结尾。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.selector</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.selector</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>






<h2 id="3-通用"><a href="#3-通用" class="headerlink" title="3 通用"></a>3 通用</h2><h3 id="3-1-选择器"><a href="#3-1-选择器" class="headerlink" title="3.1 选择器"></a>3.1 选择器</h3><h4 id="强制-如无必要，不得为-id、class-选择器添加类型选择器进行限定。"><a href="#强制-如无必要，不得为-id、class-选择器添加类型选择器进行限定。" class="headerlink" title="[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。"></a>[强制] 如无必要，不得为 <code>id</code>、<code>class</code> 选择器添加类型选择器进行限定。</h4><p>解释：</p>
<p>在性能和维护性上，都有一定的影响。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-id">#error</span>,</span><br><span class="line"><span class="selector-class">.danger-message</span> &#123;</span><br><span class="line">    <span class="attribute">font-color</span>: <span class="number">#c00</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">dialog</span><span class="selector-id">#error</span>,</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.danger-message</span> &#123;</span><br><span class="line">    <span class="attribute">font-color</span>: <span class="number">#c00</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-选择器的嵌套层级应不大于-3-级，位置靠后的限定条件应尽可能精确。"><a href="#建议-选择器的嵌套层级应不大于-3-级，位置靠后的限定条件应尽可能精确。" class="headerlink" title="[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。"></a>[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-id">#username</span> <span class="selector-tag">input</span> &#123;&#125;</span><br><span class="line"><span class="selector-class">.comment</span> <span class="selector-class">.avatar</span> &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.page</span> <span class="selector-class">.header</span> <span class="selector-class">.login</span> <span class="selector-id">#username</span> <span class="selector-tag">input</span> &#123;&#125;</span><br><span class="line"><span class="selector-class">.comment</span> <span class="selector-tag">div</span> * &#123;&#125;</span><br></pre></td></tr></table></figure>



<h3 id="3-2-属性缩写"><a href="#3-2-属性缩写" class="headerlink" title="3.2 属性缩写"></a>3.2 属性缩写</h3><h4 id="建议-在可以使用缩写的情况下，尽量使用属性缩写。"><a href="#建议-在可以使用缩写的情况下，尽量使用属性缩写。" class="headerlink" title="[建议] 在可以使用缩写的情况下，尽量使用属性缩写。"></a>[建议] 在可以使用缩写的情况下，尽量使用属性缩写。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.post</span> &#123;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">12px</span>/<span class="number">1.5</span> arial, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.post</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: arial, sans-serif;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-border-margin-padding-等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。"><a href="#建议-使用-border-margin-padding-等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。" class="headerlink" title="[建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。"></a>[建议] 使用 <code>border</code> / <code>margin</code> / <code>padding</code> 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。</h4><p>解释：</p>
<p>border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* centering &lt;article class="page"&gt; horizontally and highlight featured ones */</span></span><br><span class="line"><span class="selector-tag">article</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.page</span> &#123;</span><br><span class="line">    <span class="attribute">margin-right</span>: auto;</span><br><span class="line">    <span class="attribute">margin-left</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.featured</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#69c</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.page</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> auto; <span class="comment">/* introducing redundancy */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.featured</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#69c</span>; <span class="comment">/* introducing redundancy */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="3-3-属性书写顺序"><a href="#3-3-属性书写顺序" class="headerlink" title="3.3 属性书写顺序"></a>3.3 属性书写顺序</h3><h4 id="建议-同一-rule-set-下的属性在书写时，应按功能进行分组，并以-Formatting-Model（布局方式、位置）-gt-Box-Model（尺寸）-gt-Typographic（文本相关）-gt-Visual（视觉效果）-的顺序书写，以提高代码的可读性。"><a href="#建议-同一-rule-set-下的属性在书写时，应按功能进行分组，并以-Formatting-Model（布局方式、位置）-gt-Box-Model（尺寸）-gt-Typographic（文本相关）-gt-Visual（视觉效果）-的顺序书写，以提高代码的可读性。" class="headerlink" title="[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） &gt; Box Model（尺寸） &gt; Typographic（文本相关） &gt; Visual（视觉效果） 的顺序书写，以提高代码的可读性。"></a>[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 <strong>Formatting Model（布局方式、位置） &gt; Box Model（尺寸） &gt; Typographic（文本相关） &gt; Visual（视觉效果）</strong> 的顺序书写，以提高代码的可读性。</h4><p>解释：</p>
<ul>
<li>Formatting Model 相关属性包括：<code>position</code> / <code>top</code> / <code>right</code> / <code>bottom</code> / <code>left</code> / <code>float</code> / <code>display</code> / <code>overflow</code> 等</li>
<li>Box Model 相关属性包括：<code>border</code> / <code>margin</code> / <code>padding</code> / <code>width</code> / <code>height</code> 等</li>
<li>Typographic 相关属性包括：<code>font</code> / <code>line-height</code> / <code>text-align</code> / <code>word-wrap</code> 等</li>
<li>Visual 相关属性包括：<code>background</code> / <code>color</code> / <code>transition</code> / <code>list-style</code> 等</li>
</ul>
<p>另外，如果包含 <code>content</code> 属性，应放在最前面。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.sidebar</span> &#123;</span><br><span class="line">    <span class="comment">/* formatting model: positioning schemes / offsets / z-indexes / display / ...  */</span></span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">overflow-x</span>: hidden;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* box model: sizes / margins / paddings / borders / ...  */</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* typographic: font / aligns / text styles / ... */</span></span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">20px</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* visual: colors / shadows / gradients / ... */</span></span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">-webkit-transition</span>: color <span class="number">1s</span>;</span><br><span class="line">       <span class="attribute">-moz-transition</span>: color <span class="number">1s</span>;</span><br><span class="line">            <span class="attribute">transition</span>: color <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="3-4-清除浮动"><a href="#3-4-清除浮动" class="headerlink" title="3.4 清除浮动"></a>3.4 清除浮动</h3><h4 id="建议-当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置-clear-或触发-BFC-的方式进行-clearfix。尽量不使用增加空标签的方式。"><a href="#建议-当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置-clear-或触发-BFC-的方式进行-clearfix。尽量不使用增加空标签的方式。" class="headerlink" title="[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。"></a>[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 <code>clear</code> 或触发 <code>BFC</code> 的方式进行 <code>clearfix</code>。尽量不使用增加空标签的方式。</h4><p>解释：</p>
<p>触发 BFC 的方式很多，常见的有：</p>
<ul>
<li>float 非 none</li>
<li>position 非 static</li>
<li>overflow 非 visible</li>
</ul>
<p>如希望使用更小副作用的清除浮动方法，参见 <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank" rel="noopener">A new micro clearfix hack</a> 一文。</p>
<p>另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。</p>
<h3 id="3-5-important"><a href="#3-5-important" class="headerlink" title="3.5 !important"></a>3.5 !important</h3><h4 id="建议-尽量不使用-important-声明。"><a href="#建议-尽量不使用-important-声明。" class="headerlink" title="[建议] 尽量不使用 !important 声明。"></a>[建议] 尽量不使用 <code>!important</code> 声明。</h4><h4 id="建议-当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和-important-定义样式。"><a href="#建议-当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和-important-定义样式。" class="headerlink" title="[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。"></a>[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 <code>!important</code> 定义样式。</h4><p>解释：</p>
<p>必须注意的是，仅在设计上 <code>确实不允许任何其它场景覆盖样式</code> 时，才使用内联的 <code>!important</code> 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。</p>
<h3 id="3-6-z-index"><a href="#3-6-z-index" class="headerlink" title="3.6 z-index"></a>3.6 z-index</h3><h4 id="建议-将-z-index-进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。"><a href="#建议-将-z-index-进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。" class="headerlink" title="[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。"></a>[建议] 将 <code>z-index</code> 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。</h4><p>解释：</p>
<p>同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 <code>z-index</code> 或递增 <code>z-index</code>。</p>
<p>建议每层包含100个 <code>z-index</code> 来容纳足够的元素，如果每层元素较多，可以调整这个数值。</p>
<h4 id="建议-在可控环境下，期望显示在最上层的元素，z-index-指定为-999999。"><a href="#建议-在可控环境下，期望显示在最上层的元素，z-index-指定为-999999。" class="headerlink" title="[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。"></a>[建议] 在可控环境下，期望显示在最上层的元素，<code>z-index</code> 指定为 <code>999999</code>。</h4><p>解释：</p>
<p>可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。</p>
<p>不建议取值为 <code>2147483647</code>。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。</p>
<h4 id="建议-在第三方环境下，期望显示在最上层的元素，通过标签内联和-important，将-z-index-指定为-2147483647。"><a href="#建议-在第三方环境下，期望显示在最上层的元素，通过标签内联和-important，将-z-index-指定为-2147483647。" class="headerlink" title="[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。"></a>[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 <code>!important</code>，将 <code>z-index</code> 指定为 <code>2147483647</code>。</h4><p>解释：</p>
<p>第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。</p>
<h2 id="4-值与单位"><a href="#4-值与单位" class="headerlink" title="4 值与单位"></a>4 值与单位</h2><h3 id="4-1-文本"><a href="#4-1-文本" class="headerlink" title="4.1 文本"></a>4.1 文本</h3><h4 id="强制-文本内容必须用双引号包围。"><a href="#强制-文本内容必须用双引号包围。" class="headerlink" title="[强制] 文本内容必须用双引号包围。"></a>[强制] 文本内容必须用双引号包围。</h4><p>解释：</p>
<p>文本类型的内容可能在选择器、属性值等内容中。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">html</span><span class="selector-attr">[lang|=<span class="string">"zh"</span>]</span> <span class="selector-tag">q</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"“"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">html</span><span class="selector-attr">[lang|=<span class="string">"zh"</span>]</span> <span class="selector-tag">q</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"”"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">html</span><span class="selector-attr">[lang|=zh]</span> <span class="selector-tag">q</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'Microsoft YaHei'</span>, sans-serif;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">'“'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">html</span><span class="selector-attr">[lang|=zh]</span> <span class="selector-tag">q</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"”"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-2-数值"><a href="#4-2-数值" class="headerlink" title="4.2 数值"></a>4.2 数值</h3><h4 id="强制-当数值为-0-1-之间的小数时，省略整数部分的-0。"><a href="#强制-当数值为-0-1-之间的小数时，省略整数部分的-0。" class="headerlink" title="[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。"></a>[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 <code>0</code>。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">panel</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: .<span class="number">8</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">panel</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.8</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-3-url"><a href="#4-3-url" class="headerlink" title="4.3 url()"></a>4.3 url()</h3><h4 id="强制-url-函数中的路径不加引号。"><a href="#强制-url-函数中的路径不加引号。" class="headerlink" title="[强制] url() 函数中的路径不加引号。"></a>[强制] <code>url()</code> 函数中的路径不加引号。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(bg.png);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="建议-url-函数中的绝对路径可省去协议名。"><a href="#建议-url-函数中的绝对路径可省去协议名。" class="headerlink" title="[建议] url() 函数中的绝对路径可省去协议名。"></a>[建议] <code>url()</code> 函数中的绝对路径可省去协议名。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(//baidu.com/img/bg.png) no-repeat <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="4-4-长度"><a href="#4-4-长度" class="headerlink" title="4.4 长度"></a>4.4 长度</h3><h4 id="强制-长度为-0-时须省略单位。-也只有长度单位可省"><a href="#强制-长度为-0-时须省略单位。-也只有长度单位可省" class="headerlink" title="[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)"></a>[强制] 长度为 <code>0</code> 时须省略单位。 (也只有长度单位可省)</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="4-5-颜色"><a href="#4-5-颜色" class="headerlink" title="4.5 颜色"></a>4.5 颜色</h3><h4 id="强制-RGB颜色值必须使用十六进制记号形式-rrggbb。不允许使用-rgb-。"><a href="#强制-RGB颜色值必须使用十六进制记号形式-rrggbb。不允许使用-rgb-。" class="headerlink" title="[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。"></a>[强制] RGB颜色值必须使用十六进制记号形式 <code>#rrggbb</code>。不允许使用 <code>rgb()</code>。</h4><p>解释：</p>
<p>带有alpha的颜色信息可以使用 <code>rgba()</code>。使用 <code>rgba()</code> 时每个逗号后必须保留一个空格。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">128</span>, <span class="number">0</span>, .<span class="number">3</span>);</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#008000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">128</span>,<span class="number">0</span>,.<span class="number">3</span>);</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="built_in">rgb</span>(<span class="number">0</span>, <span class="number">128</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-颜色值可以缩写时，必须使用缩写形式。"><a href="#强制-颜色值可以缩写时，必须使用缩写形式。" class="headerlink" title="[强制] 颜色值可以缩写时，必须使用缩写形式。"></a>[强制] 颜色值可以缩写时，必须使用缩写形式。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aca</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aaccaa</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-颜色值不允许使用命名色值。"><a href="#强制-颜色值不允许使用命名色值。" class="headerlink" title="[强制] 颜色值不允许使用命名色值。"></a>[强制] 颜色值不允许使用命名色值。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#90ee90</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: lightgreen;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。"><a href="#建议-颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。" class="headerlink" title="[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。"></a>[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aca</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#90ee90</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ACA</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#90EE90</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ACA</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#90ee90</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="4-6-2D-位置"><a href="#4-6-2D-位置" class="headerlink" title="4.6 2D 位置"></a>4.6 2D 位置</h3><h4 id="强制-必须同时给出水平和垂直方向的位置。"><a href="#强制-必须同时给出水平和垂直方向的位置。" class="headerlink" title="[强制] 必须同时给出水平和垂直方向的位置。"></a>[强制] 必须同时给出水平和垂直方向的位置。</h4><p>解释：</p>
<p>2D 位置初始值为 <code>0% 0%</code>，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。<a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" target="_blank" rel="noopener">background-position属性值的定义</a></p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: center top; <span class="comment">/* 50% 0% */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: top; <span class="comment">/* 50% 0% */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h2 id="5-文本编排"><a href="#5-文本编排" class="headerlink" title="5 文本编排"></a>5 文本编排</h2><h3 id="5-1-字体族"><a href="#5-1-字体族" class="headerlink" title="5.1 字体族"></a>5.1 字体族</h3><h4 id="强制-font-family-属性中的字体族名称应使用字体的英文-Family-Name，其中如有空格，须放置在引号中。"><a href="#强制-font-family-属性中的字体族名称应使用字体的英文-Family-Name，其中如有空格，须放置在引号中。" class="headerlink" title="[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。"></a>[强制] <code>font-family</code> 属性中的字体族名称应使用字体的英文 <code>Family Name</code>，其中如有空格，须放置在引号中。</h4><p>解释：</p>
<p>所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：</p>
<table>
<thead>
<tr>
<th>字体</th>
<th>操作系统</th>
<th>Family Name</th>
</tr>
</thead>
<tbody><tr>
<td>宋体 (中易宋体)</td>
<td>Windows</td>
<td>SimSun</td>
</tr>
<tr>
<td>黑体 (中易黑体)</td>
<td>Windows</td>
<td>SimHei</td>
</tr>
<tr>
<td>微软雅黑</td>
<td>Windows</td>
<td>Microsoft YaHei</td>
</tr>
<tr>
<td>微软正黑</td>
<td>Windows</td>
<td>Microsoft JhengHei</td>
</tr>
<tr>
<td>华文黑体</td>
<td>Mac/iOS</td>
<td>STHeiti</td>
</tr>
<tr>
<td>冬青黑体</td>
<td>Mac/iOS</td>
<td>Hiragino Sans GB</td>
</tr>
<tr>
<td>文泉驿正黑</td>
<td>Linux</td>
<td>WenQuanYi Zen Hei</td>
</tr>
<tr>
<td>文泉驿微米黑</td>
<td>Linux</td>
<td>WenQuanYi Micro Hei</td>
</tr>
</tbody></table>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Microsoft YaHei"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="强制-font-family-按「西文字体在前、中文字体在后」、「效果佳-质量高-更能满足需求-的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族-serif-sans-serif-。"><a href="#强制-font-family-按「西文字体在前、中文字体在后」、「效果佳-质量高-更能满足需求-的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族-serif-sans-serif-。" class="headerlink" title="[强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。"></a>[强制] <code>font-family</code> 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( <code>serif</code> / <code>sans-serif</code> )。</h4><p>解释：</p>
<p>更详细说明可参考<a href="http://www.zhihu.com/question/19911793/answer/13329819" target="_blank" rel="noopener">本文</a>。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Display according to platform */</span></span><br><span class="line"><span class="selector-class">.article</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Arial, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Specific for most platforms */</span></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Helvetica Neue"</span>, Arial, <span class="string">"Hiragino Sans GB"</span>, <span class="string">"WenQuanYi Micro Hei"</span>, <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-font-family-不区分大小写，但在同一个项目中，同样的-Family-Name-大小写必须统一。"><a href="#强制-font-family-不区分大小写，但在同一个项目中，同样的-Family-Name-大小写必须统一。" class="headerlink" title="[强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。"></a>[强制] <code>font-family</code> 不区分大小写，但在同一个项目中，同样的 <code>Family Name</code> 大小写必须统一。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Arial, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Arial, <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: arial, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Arial, <span class="string">"Microsoft YaHei"</span>, sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-2-字号"><a href="#5-2-字号" class="headerlink" title="5.2 字号"></a>5.2 字号</h3><h4 id="强制-需要在-Windows-平台显示的中文内容，其字号应不小于-12px。"><a href="#强制-需要在-Windows-平台显示的中文内容，其字号应不小于-12px。" class="headerlink" title="[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。"></a>[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 <code>12px</code>。</h4><p>解释：</p>
<p>由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。</p>
<h3 id="5-3-字体风格"><a href="#5-3-字体风格" class="headerlink" title="5.3 字体风格"></a>5.3 字体风格</h3><h4 id="建议-需要在-Windows-平台显示的中文内容，不要使用除-normal-外的-font-style。其他平台也应慎用。"><a href="#建议-需要在-Windows-平台显示的中文内容，不要使用除-normal-外的-font-style。其他平台也应慎用。" class="headerlink" title="[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。"></a>[建议] 需要在 Windows 平台显示的中文内容，不要使用除 <code>normal</code> 外的 <code>font-style</code>。其他平台也应慎用。</h4><p>解释：</p>
<p>由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。</p>
<h3 id="5-4-字重"><a href="#5-4-字重" class="headerlink" title="5.4 字重"></a>5.4 字重</h3><h4 id="强制-font-weight-属性必须使用数值方式描述。"><a href="#强制-font-weight-属性必须使用数值方式描述。" class="headerlink" title="[强制] font-weight 属性必须使用数值方式描述。"></a>[强制] <code>font-weight</code> 属性必须使用数值方式描述。</h4><p>解释：</p>
<p>CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。</p>
<p>浏览器本身使用一系列<a href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight" target="_blank" rel="noopener">启发式规则</a>来进行匹配，在 &lt;700 时一般匹配字体的 Regular 字重，&gt;=700 时匹配 Bold 字重。</p>
<p>但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见<a href="http://justineo.github.io/slideshows/font/#/3/15" target="_blank" rel="noopener">此表</a>)，故使用数值描述增加了灵活性，也更简短。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-5-行高"><a href="#5-5-行高" class="headerlink" title="5.5 行高"></a>5.5 行高</h3><h4 id="建议-line-height-在定义文本段落时，应使用数值。"><a href="#建议-line-height-在定义文本段落时，应使用数值。" class="headerlink" title="[建议] line-height 在定义文本段落时，应使用数值。"></a>[建议] <code>line-height</code> 在定义文本段落时，应使用数值。</h4><p>解释：</p>
<p>将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。</p>
<p>当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="6-变换与动画"><a href="#6-变换与动画" class="headerlink" title="6 变换与动画"></a>6 变换与动画</h2><h4 id="强制-使用-transition-时应指定-transition-property。"><a href="#强制-使用-transition-时应指定-transition-property。" class="headerlink" title="[强制] 使用 transition 时应指定 transition-property。"></a>[强制] 使用 <code>transition</code> 时应指定 <code>transition-property</code>。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: color <span class="number">1s</span>, border-color <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-尽可能在浏览器能高效实现的属性上添加过渡和动画。"><a href="#建议-尽可能在浏览器能高效实现的属性上添加过渡和动画。" class="headerlink" title="[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。"></a>[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。</h4><p>解释：</p>
<p>见<a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" target="_blank" rel="noopener">本文</a>，在可能的情况下应选择这样四种变换：</p>
<ul>
<li><code>transform: translate(npx, npx);</code></li>
<li><code>transform: scale(n);</code></li>
<li><code>transform: rotate(ndeg);</code></li>
<li><code>opacity: 0..1;</code></li>
</ul>
<p>典型的，可以使用 translate 来代替 left 作为动画属性。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* good */</span></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: transform <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">20px</span>); <span class="comment">/* move right for 20px */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bad */</span></span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">transition</span>: left <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">20px</span>; <span class="comment">/* move right for 20px */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>




<h2 id="7-响应式"><a href="#7-响应式" class="headerlink" title="7 响应式"></a>7 响应式</h2><h4 id="强制-Media-Query-不得单独编排，必须与相关的规则一起定义。"><a href="#强制-Media-Query-不得单独编排，必须与相关的规则一起定义。" class="headerlink" title="[强制] Media Query 不得单独编排，必须与相关的规则一起定义。"></a>[强制] <code>Media Query</code> 不得单独编排，必须与相关的规则一起定义。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Good */</span></span><br><span class="line"><span class="comment">/* header styles */</span></span><br><span class="line"><span class="keyword">@media</span> (...) &#123;</span><br><span class="line">    <span class="comment">/* header styles */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* main styles */</span></span><br><span class="line"><span class="keyword">@media</span> (...) &#123;</span><br><span class="line">    <span class="comment">/* main styles */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* footer styles */</span></span><br><span class="line"><span class="keyword">@media</span> (...) &#123;</span><br><span class="line">    <span class="comment">/* footer styles */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Bad */</span></span><br><span class="line"><span class="comment">/* header styles */</span></span><br><span class="line"><span class="comment">/* main styles */</span></span><br><span class="line"><span class="comment">/* footer styles */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (...) &#123;</span><br><span class="line">    <span class="comment">/* header styles */</span></span><br><span class="line">    <span class="comment">/* main styles */</span></span><br><span class="line">    <span class="comment">/* footer styles */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-Media-Query-如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。"><a href="#强制-Media-Query-如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。" class="headerlink" title="[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。"></a>[强制] <code>Media Query</code> 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span></span><br><span class="line">(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */</span><br><span class="line">(<span class="selector-tag">min--moz-device-pixel-ratio</span>: 2),    <span class="comment">/* Older Firefox browsers (prior to Firefox 16) */</span></span><br><span class="line">(<span class="selector-tag">min-resolution</span>: 2<span class="selector-tag">dppx</span>),             <span class="comment">/* The standard way */</span></span><br><span class="line">(<span class="selector-tag">min-resolution</span>: 192<span class="selector-tag">dpi</span>) &#123;           <span class="comment">/* dppx fallback */</span></span><br><span class="line">    <span class="comment">/* Retina-specific stuff here */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-尽可能给出在高分辨率设备-Retina-下效果更佳的样式。"><a href="#建议-尽可能给出在高分辨率设备-Retina-下效果更佳的样式。" class="headerlink" title="[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。"></a>[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。</h4><h2 id="8-兼容性"><a href="#8-兼容性" class="headerlink" title="8 兼容性"></a>8 兼容性</h2><h3 id="8-1-属性前缀"><a href="#8-1-属性前缀" class="headerlink" title="8.1 属性前缀"></a>8.1 属性前缀</h3><h4 id="强制-带私有前缀的属性由长到短排列，按冒号位置对齐。"><a href="#强制-带私有前缀的属性由长到短排列，按冒号位置对齐。" class="headerlink" title="[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。"></a>[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。</h4><p>解释：</p>
<p>标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">-webkit-box-sizing</span>: border-box;</span><br><span class="line">       <span class="attribute">-moz-box-sizing</span>: border-box;</span><br><span class="line">            <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="8-2-Hack"><a href="#8-2-Hack" class="headerlink" title="8.2 Hack"></a>8.2 Hack</h3><h4 id="建议-需要添加-hack-时应尽可能考虑是否可以采用其他方式解决。"><a href="#建议-需要添加-hack-时应尽可能考虑是否可以采用其他方式解决。" class="headerlink" title="[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。"></a>[建议] 需要添加 <code>hack</code> 时应尽可能考虑是否可以采用其他方式解决。</h4><p>解释：</p>
<p>如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。</p>
<h4 id="建议-尽量使用-选择器-hack-处理兼容性，而非-属性-hack。"><a href="#建议-尽量使用-选择器-hack-处理兼容性，而非-属性-hack。" class="headerlink" title="[建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。"></a>[建议] 尽量使用 <code>选择器 hack</code> 处理兼容性，而非 <code>属性 hack</code>。</h4><p>解释：</p>
<p>尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。</p>
<p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* IE 7 */</span></span><br><span class="line">*<span class="selector-pseudo">:first-child</span> + <span class="selector-tag">html</span> <span class="selector-id">#header</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* IE 6 */</span></span><br><span class="line">* <span class="selector-tag">html</span> <span class="selector-id">#header</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="建议-尽量使用简单的-属性-hack。"><a href="#建议-尽量使用简单的-属性-hack。" class="headerlink" title="[建议] 尽量使用简单的 属性 hack。"></a>[建议] 尽量使用简单的 <code>属性 hack</code>。</h4><p>示例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">_display</span>: inline; <span class="comment">/* fix double margin */</span></span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    *zoom: 1; /* triggering hasLayout */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-3-Expression"><a href="#8-3-Expression" class="headerlink" title="8.3 Expression"></a>8.3 Expression</h3><h4 id="强制-禁止使用-Expression。"><a href="#强制-禁止使用-Expression。" class="headerlink" title="[强制] 禁止使用 Expression。"></a>[强制] 禁止使用 <code>Expression</code>。</h4>
      
      <!-- reward -->
      
      <div id="reward-btn">
        Donate
      </div>
      
    </div>
    
    
      <!-- copyright -->
      
        <div class="declare">
          <ul class="post-copyright">
            <li>
              <i class="ri-copyright-line"></i>
              <strong>Copyright： </strong>
              Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
            </li>
          </ul>
        </div>
        
    <footer class="article-footer">
      
          
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://bodboy.gitee.io/blog/2020/04/18/css-standard/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/css/" rel="tag">css</a></li></ul>


    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2020/04/18/docker%E7%9A%84%E5%AE%89%E8%A3%85/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            docker的相关操作
          
        </div>
      </a>
    
    
      <a href="/blog/2020/04/18/SpringBoot%E6%B3%A8%E8%A7%A3%E8%AF%B4%E6%98%8E/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">springboot 注解相关</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        app_id: 'uW8QYGvvhWmNWdiwpznJ0GVa-gzGzoHsz',
        app_key: 'LrJhMzx9qEwcMV1DJjTI6f6C',
        path: window.location.pathname,
        notify: 'false',
        verify: 'false',
        avatar: '[object Object]',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2019-2021
        <i class="ri-heart-fill heart_icon"></i> panda
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        Powered by <a href="https://hexo.io" target="_blank">Hexo</a>
        <span class="division">|</span>
        Theme - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="https://portrait.gitee.com/uploads/avatars/user/1007/3023420_bodboy_1578973210.png!avatar200" alt="小熊的博客"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/tags/%E6%97%85%E8%A1%8C/">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script>
  try {
    var typed = new Typed("#subtitle", {
      strings: ['面朝大海，春暖花开', '愿你一生努力，一生被爱', '想要的都拥有，得不到的都释怀'],
      startDelay: 0,
      typeSpeed: 200,
      loop: true,
      backSpeed: 100,
      showCursor: true
    });
  } catch (err) {
  }

</script>




<script src="/blog/js/tocbot.min.js"></script>

<script>
  // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>



<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/blog/dist/main.js"></script>



<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
  });

  MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for(i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
  var ayerConfig = {
    mathjax: true
  }
</script>




<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>

  
<script src="/blog/js/clickLove.js"></script>



<!-- 复制 -->



    
    <div id="music">
    
    
    
    <iframe frameborder="no" border="1" marginwidth="0" marginheight="0" width="200" height="52"
        src="//music.163.com/outchain/player?type=2&id=1297802566&auto=1&height=32"></iframe>
</div>

<style>
    #music {
        position: fixed;
        right: 15px;
        bottom: 0;
        z-index: 998;
    }
</style>
    
  </div>
</body>

</html>